import React, { useEffect, useState,useRef,useContext } from 'react'
import { Button, Table, Modal, Form,Input } from 'antd';
import axios from 'axios';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal



function NewsCategory() {
    const EditableContext = React.createContext(null);
    const [dataSource, setdataSource] = useState([])
    const getList = async () => {
        var res = await axios.get("/categories")
        setdataSource(res.data)
    }
    useEffect(() => {
        getList()
    }, [])
    const handleSave=(record)=>{
        console.log(record);
        setdataSource(dataSource.map(item=>{
            if(item.id===record.id){
                return{
                    id:item.id,
                    title:record.title,
                    value:record.title
                }
            }
            return item
        }))
        axios.patch(`/categories/${record.id}`,{
            title:record.title,
            value:record.title
        })

    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '栏目名称',
            dataIndex: 'title',
            onCell: (record) => ({
                record,
                editable: true,
                dataIndex: 'title',
                title: '栏目名称',
                handleSave: handleSave,
              }),
        },

        {
            title: '操作',
            dataIndex: '',
            render: (item) =>
                <div>
                    <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} ></Button>
                </div>
        },
    ];
    const confirmMethod = (item) => {
        confirm({
            title: 'Are you sure delete this task?',
            icon: <ExclamationCircleOutlined />,

            onOk() {
                deleteItem(item)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const deleteItem = async (item) => {

        setdataSource(dataSource.filter(data => data.id != item.id))
        var res = await axios.delete('/categories/' + item.id)
    }
    const EditableRow = ({ index, ...props }) => {
        const [form] = Form.useForm();
        return (
            <Form form={form} component={false}>
                <EditableContext.Provider value={form}>
                    <tr {...props} />
                </EditableContext.Provider>
            </Form>
        );
    };

    const EditableCell = ({
        title,
        editable,
        children,
        dataIndex,
        record,
        handleSave,
        ...restProps
      }) => {
        const [editing, setEditing] = useState(false);
        const inputRef = useRef(null);
        const form = useContext(EditableContext);
        useEffect(() => {
          if (editing) {
            inputRef.current.focus();
          }
        }, [editing]);
      
        const toggleEdit = () => {
          setEditing(!editing);
          form.setFieldsValue({
            [dataIndex]: record[dataIndex],
          });
        };
      
        const save = async () => {
          try {
            const values = await form.validateFields();
            toggleEdit();
            handleSave({ ...record, ...values });
          } catch (errInfo) {
            console.log('Save failed:', errInfo);
          }
        };
      
        let childNode = children;
      
        if (editable) {
          childNode = editing ? (
            <Form.Item
              style={{
                margin: 0,
              }}
              name={dataIndex}
              rules={[
                {
                  required: true,
                  message: `${title} is required.`,
                },
              ]}
            >
              <Input ref={inputRef} onPressEnter={save} onBlur={save} />
            </Form.Item>
          ) : (
            <div
              className="editable-cell-value-wrap"
              style={{
                paddingRight: 24,
              }}
              onClick={toggleEdit}
            >
              {children}
            </div>
          );
        }
      
        return <td {...restProps}>{childNode}</td>;
      };
      

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5,
            }}
                rowKey={item => item.id}
                components={{
                    body: {
                        row: EditableRow,
                        cell: EditableCell
                    }
                }}
            />;

        </div>
    )
}

export default NewsCategory
